import React from 'react';
import { useParams, useLocation, useNavigate } from 'react-router-dom';
import { ArrowLeft, AlertCircle, Thermometer, Heart, Brain } from 'lucide-react';

interface SymptomData {
  symptomName: string;
  symptomDescription: string;
}

export default function SymptomDetailPage() {
  const { symptomId } = useParams();
  const location = useLocation();
  const navigate = useNavigate();
  const symptomData = location.state as SymptomData;

  const handleBack = () => {
    navigate(-1);
  };

  return (
    <div className="min-h-screen bg-gray-50">
      {/* 头部 */}
      <div className="bg-white shadow-sm">
        <div className="flex items-center px-4 py-3">
          <button
            onClick={handleBack}
            className="mr-3 p-2 hover:bg-gray-100 rounded-full transition-colors"
          >
            <ArrowLeft size={20} />
          </button>
          <h1 className="text-lg font-semibold text-gray-900">
            {symptomData?.symptomName || '症状详情'}
          </h1>
        </div>
      </div>

      {/* 症状信息 */}
      <div className="p-4">
        <div className="bg-white rounded-lg shadow-sm p-6 mb-4">
          <div className="flex items-center space-x-3 mb-4">
            <div className="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center">
              <AlertCircle className="text-orange-600" size={24} />
            </div>
            <div>
              <h2 className="text-xl font-bold text-gray-900">
                {symptomData?.symptomName || '症状名称'}
              </h2>
              <p className="text-sm text-orange-500">常见症状</p>
            </div>
          </div>
          
          <p className="text-gray-600 mb-6">
            {symptomData?.symptomDescription || '症状描述信息'}
          </p>
          
          {/* 症状严重程度 */}
          <div className="mb-6">
            <h3 className="text-sm font-medium text-gray-700 mb-2">严重程度</h3>
            <div className="flex space-x-2">
              {['轻度', '中度', '重度'].map((level, index) => (
                <div
                  key={level}
                  className={`px-3 py-1 rounded-full text-xs font-medium ${
                    index === 0 ? 'bg-green-100 text-green-700' :
                    index === 1 ? 'bg-yellow-100 text-yellow-700' :
                    'bg-red-100 text-red-700'
                  }`}
                >
                  {level}
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* 常见表现 */}
        <div className="bg-white rounded-lg shadow-sm p-6 mb-4">
          <h3 className="text-lg font-semibold text-gray-900 mb-4">常见表现</h3>
          <div className="space-y-3">
            <div className="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg">
              <Thermometer className="text-red-500" size={20} />
              <span className="text-gray-700">体温异常</span>
            </div>
            <div className="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg">
              <Heart className="text-red-500" size={20} />
              <span className="text-gray-700">心跳加快</span>
            </div>
            <div className="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg">
              <Brain className="text-red-500" size={20} />
              <span className="text-gray-700">头晕头痛</span>
            </div>
          </div>
        </div>

        {/* 可能原因 */}
        <div className="bg-white rounded-lg shadow-sm p-6 mb-4">
          <h3 className="text-lg font-semibold text-gray-900 mb-4">可能原因</h3>
          <div className="space-y-2">
            <div className="flex items-center space-x-2">
              <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
              <span className="text-gray-700">病毒感染</span>
            </div>
            <div className="flex items-center space-x-2">
              <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
              <span className="text-gray-700">细菌感染</span>
            </div>
            <div className="flex items-center space-x-2">
              <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
              <span className="text-gray-700">过敏反应</span>
            </div>
            <div className="flex items-center space-x-2">
              <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
              <span className="text-gray-700">环境因素</span>
            </div>
          </div>
        </div>

        {/* 建议措施 */}
        <div className="bg-white rounded-lg shadow-sm p-6 mb-4">
          <h3 className="text-lg font-semibold text-gray-900 mb-4">建议措施</h3>
          <div className="space-y-3">
            <div className="p-3 bg-blue-50 border border-blue-200 rounded-lg">
              <p className="text-blue-800 text-sm">
                <strong>立即就医：</strong>如果症状持续加重，请及时就医
              </p>
            </div>
            <div className="p-3 bg-green-50 border border-green-200 rounded-lg">
              <p className="text-green-800 text-sm">
                <strong>休息调养：</strong>保持充足休息，多喝温水
              </p>
            </div>
            <div className="p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
              <p className="text-yellow-800 text-sm">
                <strong>观察症状：</strong>记录症状变化，为医生诊断提供参考
              </p>
            </div>
          </div>
        </div>

        {/* 相关医生 */}
        <div className="bg-white rounded-lg shadow-sm p-6">
          <h3 className="text-lg font-semibold text-gray-900 mb-4">相关专家</h3>
          <div className="space-y-3">
            <div className="p-4 border border-gray-200 rounded-lg hover:border-blue-300 cursor-pointer transition-colors">
              <div className="flex items-center space-x-3">
                <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
                  <span className="text-blue-600 font-medium">张</span>
                </div>
                <div className="flex-1">
                  <h4 className="font-medium text-gray-900">张医生</h4>
                  <p className="text-sm text-gray-500">内科主任医师</p>
                </div>
                <button className="px-4 py-2 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition-colors">
                  咨询
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
} 